<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js制作魅蓝note2页面演示</title>
<link rel="stylesheet" type="text/css" href="/Project/Public/Admin/css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="/Project/Public/Admin/css/style.css">
</head>
<script src="/Project/Public/Admin/js/jquery-1.8.2.min.js"></script>
<script src="/Project/Public/Admin/layer/layer.js"></script>
<script>
function login(){
	console.log(1);
	//var layer = layui.layer;
    layer.open({
  type: 2,
  title:'用户登录',
  area: ['500px', '400px'],
  shadeClose: true, //点击遮罩关闭
  content: '<?php echo U('Home/Login/index');?>'
  });
}
</script>
<body>
<div class="ml-nav">
	<div class="center-wrap clearfix">
		<h2 class="ml-logo">魅蓝note2</h2>
		<p class="ml-link">
			<a href="javascript:">概述</a>
			<a href="javascript:">参数</a>
			<a href="javascript:">图库</a>
			<a href="javascript:">机型比较</a>
			<a href="javascript:">意外险</a>
		</p>
		<a class="buy-now" href="javascript:">立即购买</a>
	</div>
</div>

<div id="dowebok">
	<div class="section header fp-auto-height">
		<div class="center-wrap clearfix">
			<h1 class="meizu-logo"><a href="#">MEIZU</a></h1>
			<ul class="nav">
				<li><a href="javascript:">在线商店</a></li>
				<li><a href="javascript:">产品</a></li>
				<li><a href="javascript:">专卖店</a></li>
				<li><a href="javascript:">Flyme</a></li>
				<li><a href="javascript:">服务</a></li>
				<li><a href="javascript:">社区</a></li>
			</ul>
			<div class="login">
				<a href="">注册</a>|<a href="javascript:login()">登陆</a>
			</div>
		</div>
	</div>
	
	<div class="section banner active">
		<div class="center-wrap">
			<div class="desc banner-desc">
				<h1>青年良品</h1>
				<p>追求极致，轻易不说完美&mdash;&mdash;半年时间内，我们便更新了魅蓝 note2。它从各个方面都更进一步；无论是 R 角弧线、还是更佳的相机算法、甚或是全新的 mBack 键……如此多的改进，只为给你一台更加完美的「青年良品」。</p>
			</div>
		</div>
	</div>

	<div class="section thin">
		<div class="center-wrap">
			<div class="desc thin-desc">
				<h1>多彩纤薄机身</h1>
				<p>魅蓝 note2 延续了多彩配色风格，并首次引入魅族 MX 系列的金属灰配色，深邃，且富有质感。魅蓝 note2 适于年轻个性，也完美契合轻熟商务。仅 149g 的重量，薄至 8.7mm 的厚度，更性感的 R 角弧度让单手握持毫无繁重。</p>
			</div>
			<div class="thin-img">
				<img alt="thin" src="/Project/Public/Admin/images/phone-blue.png" class="thin-img1">
				<img alt="thin" src="/Project/Public/Admin/images/phone-white.png" class="thin-img2">
			</div>
		</div>
	</div>

	<div class="section cnc">
		<div class="center-wrap">
			<div class="desc cnc-desc">
				<h1>一体化成型 CNC 精雕</h1>
				<p>更为成熟的一体化成型工艺被运用于魅蓝 note2 上。外部聚碳酸酯材质后盖包裹着内里的镁合金骨架，温润手感与坚实结构均完美继承。mBack 键首次出现在魅蓝系列，经 CNC 精加工后的铝合金按键加固环，视觉冲击与金属质感更强烈。</p>
			</div>
		</div>
	</div>
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>

	<div class="section screen">
		<div class="center-wrap">
			<div class="desc screen-desc">
				<h1>5.5 英寸 1080P 全贴合屏幕</h1>
				<p>5.5 英寸 1080P Full HD 屏幕，IGZO 显示技术可让每台手机都有高度统一的出色表现，也具备绝佳的低功耗特性。403PPI 带来细腻的视觉体验，对比度高达 1000：1。屏幕亮度则为 450cd/m²，户外强光下依旧清晰可见。GFF 全贴合，避免反光影响，屏显透彻。</p>
				<ul class="parameters-list">
					<li><h2>403</h2><span>PPI</span></li>
					<li><h2>1000 : 1</h2><span>对比度</span></li>
					<li><h2>450cd/m²</h2><span>亮度</span></li>
				</ul>
			</div>
		</div>
		<div class="screen-img">
			<img alt="screen" src="/Project/Public/Admin/images/screen.png">
		</div>
	</div>

	<div class="section cpu">
		<div class="center-wrap">
			<div class="desc cpu-desc">
				<h1>64 位八核 CPU 三核心图形处理器</h1>
				<p>新一代 64 位 MT6753 处理器，八颗 A53 架构核心可根据具体使用场景进行智能调配。灵活兼顾高性能大型游戏与日常轻度使用，无需习惯「斤斤计较」的电量规划。图形处理器为三核心 64 位 Mali T720，视频播放画面顺滑流畅。</p>
			</div>
			<div class="cpu-img">
				<img alt="cpu" src="/Project/Public/Admin/images/playgame.png?v=2">
			</div>
		</div>
	</div>

	<div class="section net">
		<div class="center-wrap">
			<div class="desc net-desc">
				<h1>五模十三频 双 4G 双卡双待</h1>
				<p>不再受限硬件，支持 TD-LTE 与 FDD-LTE 双 4G 制式，无缝切换中国移动中国联通。单卡槽双 Nano-SIM 卡位简洁机身设计，主卡位还可复用兼容最大 128GB 内存卡扩展。<br>*公开版可支持中国移动中国联通双 4G</p>
			</div>
		</div>
		<div class="net-img">
			<img alt="net" src="/Project/Public/Admin/images/card.jpg" style="opacity: 1;">
			<img alt="" src="/Project/Public/Admin/images/cc-a.png" class="cc cc1" style="opacity: 1;">
			<img alt="" src="/Project/Public/Admin/images/cc-b.png" class="cc cc2" style="opacity: 0;">
		</div>
	</div>

	<div class="section camera">
		<div class="center-wrap">
			<div class="desc camera-desc">
				<h1>1300 万像素主摄像头<br>双色温双闪光灯</h1>
				<p>魅蓝 note2 主摄像头沿用专业的三星 1300 万像素 CMOS，成像锐利细节丰富。双色温双闪光灯，暗光环境下白平衡精准自然。零延时快门拍照，生活每一瞬息皆为永恒。前置 500 万像素配合升级过的 FotoNation 智能美颜算法，按下快门的瞬间，系统即可完成美肤调亮，静待分享社交圈。</p>
			</div>
		</div>
	</div>

	<div class="section battery">
		<div class="center-wrap">
			<div class="desc battery-desc">
				<h1>3100mAh 典型容量<br>SONY 等电芯</h1>
				<p>电池典型值容量为 3100mAh，在同等价位实属少见。采购高成本的 SONY/ATL 等电芯，只因安全耐用。</p>
			</div>
		</div>
		<div class="battery-img">
			<img alt="battery" src="/Project/Public/Admin/images/bbb.png">
		</div>
	</div>

	<div class="section flyme">
		<div class="center-wrap">
			<div class="desc flyme-desc">
				<h1>基于 Android 5.1 内核的全新 Flyme 4.5 系列</h1>
				<p>Android 5.1 的优秀特性需结合 64 位处理器才能最大化释放。在全新的 Flyme 4.5 系统上，可切实感受到最先进的 Android 内存管控机制与电池续航控制。</p>
			</div>
		</div>
		<div class="flyme-img">
			<img class="flyme-pic1" src="/Project/Public/Admin/images/p1.png">
			<img class="flyme-pic2" src="/Project/Public/Admin/images/p2.png">
			<img class="flyme-pic3" src="/Project/Public/Admin/images/p3.png">
		</div>
	</div>

	<div class="section footer fp-auto-height">
		<div class="footer-link">
			<div class="center-wrap">
				<div class="clearfix">
					<dl>
						<dt>在线商店</dt>
						<dd><a href="javascript:">MX4 Pro</a></dd>
						<dd><a href="javascript:">MX4</a></dd>
						<dd><a href="javascript:">耳机</a></dd>
						<dd><a href="javascript:">保护壳</a></dd>
					</dl>

					<dl>
						<dt>Flyme OS</dt>
						<dd><a href="javascript:">云服务</a></dd>
						<dd><a href="javascript:">固件下载</a></dd>
						<dd><a href="javascript:">软件商店</a></dd>
						<dd><a href="javascript:">查找手机</a></dd>
					</dl>

					<dl>
						<dt>关于我们</dt>
						<dd><a href="javascript:">关于魅族</a></dd>
						<dd><a href="javascript:">加入我们</a></dd>
						<dd><a href="javascript:">联系我们</a></dd>
						<dd><a href="javascript:">法律声明</a></dd>
					</dl>

					<dl>
						<dt>关注我们</dt>
						<dd><a href="javascript:">新浪微博</a></dd>
						<dd><a href="javascript:">腾讯微博</a></dd>
						<dd><a href="javascript:">QQ空间</a></dd>
						<dd><a href="javascript:">官方微信</a></dd>
					</dl>

					<dl>
						<dt>客服热线</dt>
						<dd>400-788-3333</dd>
					</dl>
				</div>
			</div>
		</div>
		
		<div class="copyright center-wrap">
			<p>©2015 Meizu Telecom Equipment Co., Ltd. All rights reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
		</div>
	</div>
</div>

<script src="/Project/Public/Admin/js/jquery-1.8.2.min.js"></script>
<script src="/Project/Public/Admin/js/jquery.fullPage.js"></script>
<script>
$(function(){
	var $mlNav = $('.ml-nav');
	$('#dowebok').fullpage({
		verticalCentered: !1,
		navigation: !0,
		onLeave: function(index, nextIndex, direction){
			if(index == 2 && direction == 'up'){
				$mlNav.animate({
					top: 80
				}, 680);
			} else if(index == 1 && direction == 'down') {
				$mlNav.animate({
					top: 0
				}, 400);
			} else if(index == 3 && direction == 'up') {
				$mlNav.animate({
					top: 0
				}, 500);
			} else {
				$mlNav.animate({
					top: -66
				}, 400);
			}
		}
	});
});
</script>

</body>
</html>